<template>
  <div>
        <!-- 头部组件 -->
        <CityHeader></CityHeader>
        <!-- 搜索组件 -->
        <CitySearch :cities="cities"></CitySearch>
        <!-- 列表组件 -->
        <CityList :cities="cities" :hot="hotCities" :letter="letter"></CityList>
        <!-- 右侧字母表组件 -->
        <CityAlphabet :cities="cities" @change="handleLetterChange"></CityAlphabet>
  </div>
</template>

<script>
    import CityHeader from './components/Header'
    import CitySearch from './components/Serach'
    import CityList from './components/List'
    import CityAlphabet from './components/Alphabet'
    import axios from 'axios'
    export default {
        name:'City',
        components:{ CityHeader, CitySearch, CityList, CityAlphabet },
        data() {
            return {
                // 所有城市
                cities:{},
                // 热门城市
                hotCities:[],
                letter:''
            }
        },
        methods: {
            getCityInfo(){
                axios.get('https://aygzs.gitee.io/travel/mock/city.json').then(
                    response=>{
                        // console.log(response.data);
                        const data = response.data.data
                        
                        if(response.data.ret && data){
                            this.cities = data.cities
                            this.hotCities = data.hotCities
                        }
                    },
                    error=>{
                        alert('请求失败!',error.message)
                    },
                )
            },
            handleLetterChange(letter){
                // console.log(letter);
                this.letter = letter
            }
        },
        mounted() {
            this.getCityInfo()
        },
    }
</script>

<style lang="stylus" scoped>

</style>